<!-- 新增标签 -->
<template>
	<div>
		<el-dialog
			v-model="state.dialogVisible"
			title="新增标签"
			width="35%"
			conter
			:before-close="handleClose"
		>
			<el-form
				ref="formRef"
				:model="state"
				:inline="true"
				class="demo-form-inline"
			>
				<el-form-item
					label="新增的招标任务节点名称"
					prop="nodeName"
					:rules="[
						{
							required: true,
							message: '请输入新增的招标任务节点名称',
						},
					]"
				>
					<el-input
						v-model="state.nodeName"
						placeholder="请输入新增的招标任务节点名称"
						maxlength="32"
					/>
				</el-form-item>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button class="button_cancel2" @click="state.dialogVisible = false">
						取消
					</el-button>
					<el-button
						color="#FF7B50"
						style="color: #fff"
						type="primary"
						@click="handleAddNode"
					>
						提交
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElForm, ElDialog, ElMessage, ElFormItem, ElInput } from "element-plus";
import { processApi } from "@/api/biddingProject";

const state = reactive({
	dialogVisible: false,
	nodeName: "",
});
const formRef = ref(null);

// 新增节点
const handleAddNode = () => {
	formRef.value.validate((valid, fields) => {
		console.log(valid);
		if (valid) {
			processApi.addNode({ nodeName: state.nodeName }).then((res) => {
				if (res.code === "200") {
					state.dialogVisible = false;
					ElMessage.success("操作成功!");
					getAllNodes();
				}
			});
		}
	});
};

// 返回父级调用获取全部节点信息
const emits = defineEmits(["getAllNodes"]);
const getAllNodes = (e) => {
	emits("initAllNodeData");
};

const handleClose = () => {
	state.dialogVisible = false;
	state.nodeName = "";
};

const open = () => {
	state.dialogVisible = true;
};
defineExpose({
	open,
});
</script>

<style lang="scss" scoped>
.demo-form-inline {
	.el-form-item {
		.el-form-item__label {
			font-weight: 500;
			font-size: 16px;
		}
		.el-form-item__content {
			.el-input {
				width: 350px;
			}
		}
	}
}
</style>
